import { Card } from 'antd'
import ReactECharts from 'echarts-for-react'
import './index.scss'

const CategoryChart = ({ title }) => {
  const data = [
    { type: '小说类', value: 45 },
    { type: '文学类', value: 35 },
    { type: '科技类', value: 20 },
  ]

  const option = {
    color: ['#1890ff', '#52c41a', '#faad14'],
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      bottom: 0,
      textStyle: {
        fontSize: 13
      }
    },
    series: [{
      type: 'pie',
      radius: ['50%', '70%'],
      center: ['50%', '45%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'outside',
        formatter: '{b} {d}%',
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: true
      },
      data: data.map(item => ({
        name: item.type,
        value: item.value
      }))
    }],
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: '40%',
        style: {
          text: '图书分类',
          fontSize: 14,
          fill: '#666',
          textAlign: 'center'
        }
      },
      {
        type: 'text',
        left: 'center',
        top: '48%',
        style: {
          text: '总计',
          fontSize: 24,
          fontWeight: 600,
          fill: '#333',
          textAlign: 'center'
        }
      }
    ]
  }

  return (
    <Card title={title} className="category-chart-card" extra={<a href="#more">查看更多</a>}>
      <ReactECharts option={option} style={{ height: '330px' }} />
    </Card>
  )
}

export default CategoryChart
